<template>
  <div ref="imageWrapper">
    <a-card :bordered="false">
      <!-- 查询区域  -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="form" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <!-- <a-col :md="4" :sm="6">
            <a-form-model-item label="计划类型">
              <j-dict-select-tag
                style="width: 100%"
                v-model="queryParam.planType"
                placeholder="请选择"
                dict-code="inconplantype"
              />
            </a-form-model-item>
          </a-col> -->
            <a-col :md="4" :sm="6">
              <a-form-model-item label="账套" prop="accName">
                <a-input @click.native="openOrganModel" v-model="queryParam.accName" readOnly placeholder="请选择" />
              </a-form-model-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-model-item label="科目" prop="subjectCode">
                <a-tree-select
                  v-model="queryParam.subjectCode"
                  tree-data-simple-mode
                  style="width: 190px"
                  show-search
                  treeNodeFilterProp="title"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="请选择科目"
                  :tree-data="subjectTreeData"
                  :loadData="onLoadData"
                  allow-clear
                />
              </a-form-model-item>
            </a-col>
            <!-- <a-col :md="4" :sm="6">
            <a-form-model-item label="年度" prop="accYear">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                :allowClear="false"
                value-format="YYYY"
                v-model="queryParam.accYear"
                :open="yearPickShow"
                @panelChange="handlePanelChange"
                @openChange="handleOpenChange"
              />
            </a-form-model-item>
          </a-col> -->
            <a-col :md="4" :sm="6">
              <a-form-model-item label="开始时间" prop="startTime">
                <a-date-picker
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择开始时间"
                  v-model="queryParam.startTime"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-model-item label="结束时间" prop="endTime">
                <a-date-picker
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  placeholder="请选择结束时间"
                  v-model="queryParam.endTime"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
              <a-button
                type="danger"
                :loading="ydLoading"
                @click="
                  () => {
                    if (this.dataSource.length) {
                      const { startTime = '', endTime = '', subjectCode = '' } = this.queryParam
                      let ydnr = `【科目：${subjectCode}】`
                      let time = `【${startTime}～${endTime}】【金额分布分析】`
                      this.addYd(queryParam, ydnr, time)
                    } else {
                      this.$message.error('空数据不能新建疑点')
                    }
                  }
                "
                icon="arrow-right"
                style="margin-left: 8px"
                >转疑点</a-button
              >
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <!-- table区域-begin -->
      <div>
        <!-- <a-tabs @change="handletabChange" v-if="tabList.length">
        <a-tab-pane :key="item.id" :tab="item.unitName" v-for="item in tabList"></a-tab-pane>
      </a-tabs> -->
        <!-- TODO v-if="chartData.length" -->
        <a-row :gutter="24" style="margin-bottom: 25px" v-if="chartShow">
          <!-- TODO -->
          <div style="height: 35vh">
            <echarts :chartOpt="lineOpt" :istrigger="istrigger" />
          </div>
        </a-row>
        <a-row :gutter="24">
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="handleToDesc(record)">关联</a>
            </span>
            <span slot="unitName" slot-scope="text">
              <j-ellipsis :value="text" :length="10" />
            </span>
          </a-table>
        </a-row>
      </div>
      <!-- table区域-end  -->
      <!-- <CheckAndEditModel ref="modalForm"></CheckAndEditModel> -->
      <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>
      <CheckAndEditModel ref="modalForm"></CheckAndEditModel>
      <y-d-model ref="YDModel" :routerData="$route.path"></y-d-model>
    </a-card>
  </div>
  <!-- <img src="~@/assets/img/zdgzgj.png" alt=""> -->
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
import 'moment/locale/zh-cn'
import columns from './indexColumns'
import CheckOrganModal from '@/views/sj/sjxmzygl/yzzx/testcomponent/CheckOrganModal'
import CheckAndEditModel from './ModalView/CheckAndEditModel'
import echarts from '../components/echarts.vue'
import lineOptions from './lineChartOpt'
import { getAction } from '../../../../../api/manage'
import YDModel from '@/views/sj/components/YDModel'
import { base64toImg } from '@/mixins/base64toImg'
import { beforeyearYMD, currentYMD } from '@/mixins/commontime.js'
import { YzzxListMixin } from '../../../sjxmzygl/yzzx/mixins/YzzxListMixin.js'
export default {
  name: 'ndsjjhzd',
  mixins: [JeecgListMixin, base64toImg, YzzxListMixin],
  components: { CheckOrganModal, CheckAndEditModel, echarts, YDModel },
  watch: {
    $route: {
      handler: function (to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          this.queryParam = Object.assign(this.queryParam, to.query)
          this.$nextTick(() => {
            this.searchQuery()
          })
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      queryParam: {
        accName: '',
        accCode: '',
        unitId: '',
        endTime: currentYMD(),
        startTime: beforeyearYMD(2, 'years'),
        subjectCode: undefined,
        // ascertainMoney: 500000,
      },
      subjectTreeData: [],
      // 表头
      columns: columns(this),
      rules: {
        accYear: [{ required: true, message: '请选择年度' }],
        startTime: [{ required: true, message: '请选择开始时间' }],
        endTime: [{ required: true, message: '请选择结束时间' }],
        accName: [{ required: true, message: '请选择账套' }],
        subjectCode: [{ required: true, message: '请选择科目' }],
      },
      url: {
        list: '/sjzxzbfx/queryAmountDistribution',
        chart: '/sjzxzbfx/queryAmountDistribution',
        subjectTree: '/sjyzzx/sjZxzyAccountSubject/queryAllSubjectTree',
      },
      tabList: [],
      yearPickShow: false,
      istrigger: false,
      lineOpt: {
        id: 'lineOptions',
        options: {},
      },
      chartData: [],
      chartShow: false,
      disableMixinCreated: true,
    }
  },
  created() {
    this.getSubjectTree()
  },
  methods: {
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.queryParam //查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.data
          this.getLineChart(res.result.charts)
          this.chartShow = true
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    updateQueryParam(data) {
      // console.log(data, 'daat')
      let str1 = ''
      let str2 = ''
      let str3 = ''
      data.map((item) => {
        // TODO 账套～～～
        str1 += item.accCode + ','
        str2 += item.accName + ','
        str3 += item.unitId + ','
      })
      if (str1.length > 0) {
        str1 = str1.substr(0, str1.length - 1)
      }
      if (str2.length > 0) {
        str2 = str2.substr(0, str2.length - 1)
      }
      if (str3.length > 0) {
        str3 = str3.substr(0, str3.length - 1)
      }
      this.queryParam.accCode = str1
      this.queryParam.accName = str2
      this.queryParam.unitId = str3
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
    moment,
    // 得到年份选择器的值
    handlePanelChange(value) {
      this.yearPickShow = false
      this.queryParam.accYear = moment(value).format('YYYY')
      this.$refs.form.validateField('accYear', (error) => {
        console.log(error)
      })
    },
    // TODO 关联
    handleToDesc(record) {
      // console.log(record, 'record')
      this.$refs.modalForm.check(record, this.queryParam)
      this.$refs.modalForm.visible = true
    },
    searchQuery() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.getLineChart()
          this.loadData(1)
        } else {
          console.log('error submit!!')
          return false
        }
      })

      if (typeof this.getTop === 'function') {
        this.getTop()
      }
    },
    searchReset() {
      this.queryParam = {
        accName: '',
        accCode: '',
        unitId: '',
      }
      this.dataSource = []
      this.chartShow = false
      // this.getLineChart()
      // this.loadData(1)
    },
    getLineChart(chart) {
      this.lineOpt.options = lineOptions({ data: chart })
      this.istrigger = !this.istrigger
      // getAction(this.url.chart, this.queryParam).then((res) => {
      //   if (res.success) {
      //     this.chartData = res.result.charts
      //     this.lineOpt.options = lineOptions({ data: res.result.charts })
      //     this.istrigger = !this.istrigger
      //     // TODO 页签
      //     // console.log(res.result);
      //     // this.tabList = res.result.data
      //     // this.handletabChange(res.result.data[0].id)
      //   }
      // })
    },
    // handletabChange(key) {
    //   let data = []
    //   this.chartData.filter((item) => {
    //     if (item.id == key) {
    //       console.log(item.data, '~~~')
    //       data = item.charts
    //     }
    //   })
    //   console.log(data)
    //   this.pieOpt.options = lineOptions({ data })
    //   this.istrigger = !this.istrigger
    // },
  },
}
</script>
<style scoped>
.ant-select-dropdown {
  width: 190px;
}
</style>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>